<template>
  <div class="container" ref="container" >
    <div class="filter-bar">
      <div v-for="(item, index) in sortOptions" :key="index" :class="{'active':index===activeIndex,'bar-item':true}" @click="changeSort(item.value)">
        {{ item.label }}
      </div>
    </div>
    <div class="rest" ref="restDom"></div>

    <div class="product-list">
      <div v-for="(product,index) in products" :key="index" class="product-item">
        <img :src="product.mainImageUrl" alt="商品图片" class="product-img" />
        <div class="item-title">
          <img :src="product.allianceLogoUrl" alt="" class="title-icon">
          <span >
            {{ product.title }}
          </span>
        </div>
        <div class="item-price" >
        <span>¥{{ product.discountPrice }}</span>
        <s>¥{{ product.originalPrice }}</s>
        </div>
        <div class="item-btm">
          <div class="btm-item btm-couponAmount" >
            <span>卷</span>
            <span>{{product.couponAmount!==null?Number(product.couponAmount).toFixed(2) :'-' }}</span>
          </div>
          <div class="btm-item btm-incomeAmount" v-if="product.showIncomeAmount">
            <span>约返</span>
            <span>{{product.incomeAmount!==null?Number(product.incomeAmount).toFixed(2) :'-'  }}</span>
          </div>
        </div>

      </div>
    </div>

    <div class="loading" ref="loadDom" >加载中...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import './product.less'

import {getProducts} from '../service/product.ts';

const products = ref([]);
const pageNo = ref(0);
const loading = ref(false);
const sortStrategy = ref(0);
const loadDom=ref(null)
const restDom = ref(null)
const activeIndex = ref(0)
const container = ref(null)


// 选项
const sortOptions = [
  { label: "综合", value: 0 },
  { label: "销量", value: 1 },
  { label: "价格", value: 2 },
  { label: "最新", value: 3 },
];



// 获取商品数据
const loadProducts = async (reset = false) => {
  if (loading.value) return;
  loading.value = true;
  const params = {
    pageNo: pageNo.value,
    sortStrategy: sortStrategy.value,
    _currentPageType: 1,
    _currentPageNo: '166072354552493993',
    categoryNo: '166072430564787549',
    sortType: 1,
    displayMode: 0,
    pageSize: 10,
}

  try {
    const { data } = await getProducts(params);
    if (reset) {
      products.value = data.ldata; 
    } else {
      products.value.push(...data.ldata); 
    }
  } catch (error) {
    console.error("请求失败", error);
  } finally {
    loading.value = false;
  }
};


// 切换类型
const changeSort = (strategy) => {
  sortStrategy.value = strategy;
  activeIndex.value=strategy
  pageNo.value = 1;
  loadProducts(true);
  container.value.scrollTop=0
};


const ob = new IntersectionObserver(
  async (entries) => {
    if (loading.value  ) {
      return
    }
    const entry = entries[0]
   
    if (entry.isIntersecting&&entries[0].boundingClientRect.height) {
      //加载更多
      pageNo.value++
      loadProducts();
    } else if(entry.isIntersecting&&!entries[0].boundingClientRect.height){
      // 重置
      pageNo.value=1
      loadProducts(true);
      
    }
   }, {
    threshold:0
  }
)
onMounted(() => {
  ob.observe(loadDom.value)
  ob.observe(restDom.value)
});
</script>
